<template>
  <div class="total">
    <div class="header">
      <div class="carbonleft">
        <h1 style="font-style: oblique;">北京林业大学碳排放核算与管理系统</h1>
      </div>
      <div class="right">
        <el-menu router class="tan-el-menu" style="background-color: steelblue" mode="horizontal">
          <el-menu-item index="/Tan/TanPage" class="header-icon el-icon-s-home" style="font-size: 23px;color: #323A39">
            首页</el-menu-item>
          <!-- <el-menu-item index="/Tan/TanData" class="header-icon el-icon-edit" style="font-size: 23px;color: #323A39">数据输入
          </el-menu-item> -->
          <el-submenu index="1">
            <template slot="title">
              <i class="header-icon el-icon-edit"></i>
              <span>数据输入</span>
            </template>
            <el-menu-item-group>
              <el-menu-item @click="jumpEnergy()" class="el-icon-location"
                style="font-size: 20px;  display: block; padding-left: 2%;">&nbsp;&nbsp;物质输入</el-menu-item>
              <el-menu-item @click="jumpCarbon()" class="el-icon-location"
                style="font-size: 20px;  display: block; padding-left: 2%;">&nbsp;&nbsp;碳排放输入</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <!-- <el-menu-item index="/Tan/adminPage" class="header-icon el-icon-s-flag"
            style="font-size: 23px;color: #323A39">能耗监测</el-menu-item> -->
          <el-submenu index="2">
            <template slot="title">
              <i class="header-icon el-icon-s-flag"></i>
              <span>能耗监测</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/Tan/TanSchool" class="el-icon-location"
                style="font-size: 20px;  display: block; padding-left: 2%;">&nbsp;&nbsp;单体监测</el-menu-item>
              <el-menu-item index="/Tan/TanBuilding" class="el-icon-location"
                style="font-size: 20px;  display: block; padding-left: 2%;">&nbsp;&nbsp;能源审计</el-menu-item>
              <el-menu-item index="/Tan/TanData" class="el-icon-location"
                style="font-size: 20px;  display: block; padding-left: 2%; width: 240px;">&nbsp;&nbsp;能耗碳排放量对比</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <!-- <el-menu-item index="/Tan/adminPage" class="header-icon el-icon-s-data"
            style="font-size: 23px;color: #323A39">碳排放计算与减碳分析</el-menu-item> -->
          <el-submenu index="3">
            <template slot="title">
              <i class="header-icon el-icon-s-data"></i>
              <span>碳排放计算与减碳分析</span>
            </template>
            <el-menu-item-group>
              <el-menu-item class="el-icon-location"
                style="font-size: 20px;  display: block; padding-left: 2%;">&nbsp;&nbsp;核算结果</el-menu-item>
              <el-menu-item class="el-icon-location"
                style="font-size: 20px;  display: block; padding-left: 2%;">&nbsp;&nbsp;减碳分析</el-menu-item>
            </el-menu-item-group>
          </el-submenu>

          <el-menu-item class="header-icon el-icon-s-order"
            style="font-size: 23px;color: #323A39">报告生成</el-menu-item>

          <div class="avatar" style=" display: inline-block;" v-if="isLogin!='youke'">
            <el-dropdown @command="handleCommand" menu-align='start'
              style="width: 50px; text-align: center; padding-left: 20%;">
              <span class="user-img-icon" style="margin-top: 10px;">
                <i class="el-icon-user-solid" style="font-size: 30px; display: block;"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="signout" style="width: 60px;">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>

        </el-menu>

      </div>
    </div>
    <div class="child">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
import pubsub from 'pubsub-js'
export default {
  name: 'TanHeader',
  data() {
    return {
      //配合beforeDestroy生命周期
      loginForm: false,
      isLogin:'youke'
    }
  },
  props: {
    // header_name: {
    //   type: String,
    //   required: true
    // }
  },
created(){
  //3.触发全局总线方法
    this.$bus.$on('updateLoginStatus',(data)=>{
      this.isLogin = data
    })

    if(localStorage.getItem('auth')!=null){
      this.isLogin = localStorage.getItem('auth')
    }
},
  methods: {
    async handleCommand(command) {
      if (command == 'signout') {
        localStorage.removeItem("token")
        localStorage.removeItem("userId")
        localStorage.removeItem("auth")
        this.$message.success('退出登录成功')
        this.$router.push({ path: '/Tan/TanPage' })
        this.$bus.$emit('updateLoginStatus', 'youke')
        localStorage.removeItem('auth')
      } else if (command == 'backtoindex') {
        this.$router.push({ path: '/Tan/adminPage' })
      }
    },
    jumpEnergy() {
      this.$router.push({
        path: 'ManageEnergy',
      });
    },
    jumpCarbon() {
      // console.log("this.$route.path:",this.$route.path)
      this.$router.push({
        path: 'ManageCarbon',
      });
    },
    jump(value) {
      //1.localStorage
      // localStorage.setItem("loginForm",true);

      this.$router.push({
        //2.路由携参
        // path:'Login',
        // query:{
        //   loginForm: true
        // }
        //使用params时 是不能通过path跳转的
        name: 'TanLogin',
        // params:{
        //   loginForm: value
        // }
      })

      //3.触发全局总线方法
      // this.loginForm = value
      // this.$bus.$emit('sendLoginForm',this.loginForm)

      //4.利用消息订阅与发布
      // this.loginForm = value
      // pubsub.publish('sendLoginForm', value)
    }
  },

  beforeDestroy() {
    //3.触发全局总线方法
    // this.jump(this.loginForm)

    //4.利用消息订阅与发布
    // pubsub.publish('sendLoginForm', this.loginForm)
  }
}
</script>

<style scoped>


.total {
  padding: 0;
  width: 100%;
  height: 100%;
}

.header {
  white-space: nowrap;
  position: fixed;
  display: flex;
  justify-content: center;
  background-color: steelblue;
  height: 80px;
  width: 100%;
  /* display: inline-block; */
  top: 0px;
  z-index: 9;
  /* text-align: left; */
}

.carbonleft {
  display: inline-block;
  margin-left: 10px;
  margin-right: 10px;
}

.right {
  height: 63px;
  flex-shrink: 0;
  /* margin-top: 17px; */
  padding-top: 17px;
  vertical-align: top;
  text-align: left;
  display: inline-block;
  background-color: steelblue;
}

.child {
  margin-top: 60px;
  text-align: center;
  padding-top: 10px;
  width: 100%;
  height: 100%;
}
</style>
<style>

.el-dropdown-menu el-popper {
  width: 60px;
}

.el-menu--horizontal>.el-submenu .el-submenu__title {
  color: #323A39 !important;
  font-size: 23px;
  display: inline-block;
}

.el-menu--horizontal>.el-menu-item {
  height: 63px;
}

.el-submenu__title i {
  color: #323A39;
}

.el-submenu__title {
  margin-right: 0px;
  padding: 0 10px;
}

.tan-el-menu {
  background-color: steelblue !important;
}

.el-menu-item-group__title {
  width: 0px;
  height: 0px;
  margin: 0;
  padding: 0;
}

.el-menu--popup-bottom-start {
  margin: 0;
}

.el-menu.el-menu--horizontal {
  height: 60px;
  border: 0;
}

.el-menu--horizontal> .el-submenu .el-submenu__title {
  height: 63px;
}
.el-menu--horizontal>.el-menu-item.is-active{
  border-bottom: 0;
}

</style>
